import ConsoleNavItem from "./ConsoleNavItem.tsx";
import {useState} from "react";
import TableTypes from "../../model/TableTypes.ts";

import stack from "../../assets/console-nav-links/stack.svg"
import books from "../../assets/console-nav-links/books.svg"
import profiles from "../../assets/console-nav-links/profiles.svg"
import managers from "../../assets/console-nav-links/managers.svg"
import orders from "../../assets/console-nav-links/orders.svg"


const SideBarConsole = ({updateContent}: { updateContent: (args: TableTypes) => void }) => {

    const [activeNavLink, setActiveNavLink] = useState("users-nav-link");


    return (
        <div className="d-flex flex-column flex-shrink-0 bg-body-tertiary" id={"console-sidebar"}>

            <ul className="nav nav-pills nav-flush flex-column mb-auto text-center">
                <ConsoleNavItem onClick={() => {
                    setActiveNavLink("users-nav-link")
                    updateContent(TableTypes.USERS)
                }}
                                isActive={activeNavLink === "users-nav-link"}
                                id={"users-nav-link"}
                                img={
                                    profiles
                                }/>

                <ConsoleNavItem onClick={() => {
                    setActiveNavLink("books-nav-link")
                    updateContent(TableTypes.BOOKS)
                }
                }
                                isActive={activeNavLink === "books-nav-link"}
                                id={"books-nav-link"}
                                img={books}/>

                <ConsoleNavItem onClick={() => {
                    setActiveNavLink("managers-nav-link")
                    updateContent(TableTypes.MANAGERS)
                }}
                                isActive={activeNavLink === "managers-nav-link"}
                                id={"managers-nav-link"}
                                img={
                                    managers
                                }
                />

                <ConsoleNavItem onClick={() => {
                    setActiveNavLink("stacks-nav-link")
                    console.log("stacks-nav-link")
                    updateContent(TableTypes.STACKS)
                }}
                                isActive={activeNavLink === "stacks-nav-link"}
                                id={"stacks-nav-link"}
                                img={
                                    stack
                                }
                />

                <ConsoleNavItem onClick={() => {
                    setActiveNavLink("orders-nav-link")
                    console.log("orders-nav-link")
                    updateContent(TableTypes.ORDERS)
                }}
                                isActive={activeNavLink === "orders-nav-link"}
                                id={"orders-nav-link"}
                                img={
                                    orders
                                }
                />


            </ul>
            <div className="dropdown border-top">
                <a href="#"
                   className="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle"
                   data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" className="rounded-circle"/>
                </a>
                <ul className="dropdown-menu text-small shadow">
                    <li><a className="dropdown-item" href="#">New project...</a></li>
                    <li><a className="dropdown-item" href="#">Settings</a></li>
                    <li><a className="dropdown-item" href="#">Profile</a></li>
                    <li>
                        <hr className="dropdown-divider"/>
                    </li>
                    <li><a className="dropdown-item" href="#">Sign out</a></li>
                </ul>
            </div>
        </div>

    )

}


export default SideBarConsole